<template>
  <view class="homeLayout pageBg">
    <!-- 头部导航组件 -->
    <custom-nav-bar title="推荐"></custom-nav-bar>
    <!-- 轮播图 -->
    <view class="banner">
      <swiper
        indicator-dots
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="white"
        autoplay
        circular
        interval="4000"
      >
        <swiper-item
          v-for="item in bannerList"
          :key="item._id"
          @click="goDetail(item.url)"
        >
          <image :src="item.picurl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 文字公告 -->
    <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <text class="text">公告</text>
      </view>
      <!-- 轮播内容 -->
      <view class="center">
        <swiper vertical autoplay circular interval="1500" duration="300">
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator url="/pages/notice/detail">{{ item.title }}</navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#333"></uni-icons>
      </view>
    </view>

    <!-- 每日推荐 -->
    <view class="select">
      <!-- 标题组件 -->
      <common-title>
        <!-- 左侧插槽 -->
        <template #name>每日推荐</template>
        <!-- 右侧插槽 -->
        <template #custom>
          <view class="date">
            <!-- 图标 -->
            <uni-icons type="calendar" size="18"></uni-icons>
            <!-- 日期 -->
            <view class="text">
              <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
            </view>
          </view>
        </template>
      </common-title>

      <!-- 主体内容 -->
      <view class="content">
        <scroll-view scroll-x :show-scrollbar="false">
          <view
            class="box"
            v-for="item in randomList"
            :key="item._id"
            @click="goPreview(item._id)"
          >
            <image :src="item.smallPicurl" mode="aspectFill" />
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 专题 -->
    <view class="theme">
      <!-- 标题 -->
      <common-title>
        <template #name>专题精选</template>
        <template #custom>
          <navigator
            url="/pages/classify/classify"
            open-type="switchTab"
            class="more"
            >More+
          </navigator>
        </template>
      </common-title>

      <!-- 主体 -->
      <view class="content">
        <theme-item
          v-for="item in classifyList"
          :key="item._id"
          :item="item"
        ></theme-item>
        <theme-item :isMore="true"></theme-item>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  apiGetBanner,
  apiGetDayRandom,
  apiGetNotice,
  apiGetClassify,
} from "@/api/apis";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
// 进入图片详情
const goPreview = (id) => {
  uni.navigateTo({
    url: `/pages/preview/preview?id=${id}`,
  });
  uni.setStorageSync("storeClassList", randomList.value);
};
// 存储海报列表
const bannerList = ref([]);
const randomList = ref([]);
const noticeList = ref([]);
const classifyList = ref([]);
// 获取轮播图海报
const getBanner = async () => {
  const res = await apiGetBanner();

  bannerList.value = res.data;
};
getBanner();
// 获取随机九张壁纸
const getDayRandom = async () => {
  const res = await apiGetDayRandom();

  randomList.value = res.data;
};
getDayRandom();
// 获取公告
const getNotice = async () => {
  const res = await apiGetNotice();
  // noticeList.value = res.data;
  noticeList.value = [
    {
      id: 1,
      title: "贝贝贝贝贝贝",
    },
    {
      id: 2,
      title: "babybabybaby",
    },
    {
      id: 3,
      title: "超级勇的哦",
    },
  ];
};
getNotice();
// 获取专题精选
const getClassify = async () => {
  const res = await apiGetClassify();
  classifyList.value = res.data;
};
getClassify();

// 分享
onShareAppMessage((e) => {
  return {
    title: " 贝贝壁纸",
    path: "/pages/index/index",
  };
});
// 分享朋友圈
// onShareTimeline(() => {
//   return {
//     title: " 贝贝壁纸",
//   };
// });

const goDetail = (url) => {
  uni.navigateTo({
    url: `/pages/classList/classList?${url}`,
  });
};
</script>

<style lang="scss" scoped>
.homeLayout {
  .banner {
    width: 750rpx;
    padding: 30rpx 0;

    swiper {
      width: 750rpx;
      height: 340rpx;

      swiper-item {
        width: 100%;
        height: 100%;
        padding: 0 30rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }
  }

  .notice {
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #f9f9f9;
    margin: 0 auto;
    border-radius: 80rpx;
    display: flex;

    .left {
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }

      .text {
        color: $brand-theme-color;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
    .center {
      flex: 1;

      swiper {
        height: 100%;

        swiper-item {
          height: 100%;
          font-size: 30rpx;
          color: #666;
          overflow: hidden;
          // 禁止换行
          white-space: nowrap;
          // 文本溢出显示省略号
          text-overflow: ellipsis;
        }
      }
    }
    .right {
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .select {
    padding-top: 50rpx;

    .date {
      color: $brand-theme-color;
      display: flex;
      align-items: center;

      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }

      .text {
        margin-left: 5rpx;
      }
    }

    .content {
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;

      scroll-view {
        white-space: nowrap;

        .box {
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
        .box:last-child {
          margin-right: 30rpx;
        }
      }
    }
  }

  .theme {
    padding: 50rpx 0;

    .more {
      font-size: 32rpx;
      color: #888;
    }

    .content {
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: grid;
      gap: 15rpx;
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
